<template>
  <div class="yongshuiliang2">
    <div class="one">
      <div id="chart2"><img src="@/assets/images/开采深度.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">开采深度</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          extDepth
        }}</span>
        m
      </div>
    </div>
    <div class="one">
      <div id="chart22"><img src="@/assets/images/采空区面积.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">采空区面积</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          dailyProduction
        }}</span>
        ㎡
      </div>
    </div>
    <div class="one">
      <div id="chart222"><img src="@/assets/images/推进速度.png" alt="" /></div>
      <div class="txt">
        <img src="@/assets/images/平行四边形.png" alt="" />
        <span class="txtSon">推进速度</span>
      </div>
      <div class="txtSon2">
        <span style="color: rgba(0, 234, 255, 1); font-size: 16px">{{
          avgDayProgress
        }}</span>
        m/s
      </div>
    </div>
    <!-- <div class="one">
      <div id="chart14"></div>
      <div class="txt">开采深度</div>
    </div>
    <div class="one">
      <div id="chart144"></div>
      <div class="txt">日产量</div>
    </div>
    <div class="one">
      <div id="chart1444"></div>
      <div class="txt">推进速度</div>
    </div> -->
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      myChart14: null,
      myChart144: null,
      myChart1444: null,
      extDepth: 0,
      dailyProduction: 0,
      avgDayProgress: 0,
    };
  },
  computed:{
    // ...mapState(["areaCode"]),
    ...mapGetters(["areaCode"]),
  },
  watch: {
    areaCode: {
      handler(newVal, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  methods: {
    echartsFn2(val) {
      const typeList = ["实时测点", "实时测点"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart14.setOption(option);
    },
    echartsFn22(val) {
      const typeList = ["涌水预警", "涌水预警"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart144.setOption(option);
    },
    echartsFn222(val) {
      const typeList = ["降水预警", "降水预警"]; // 类型
      const valueList = [val, 50];
      /* 数据处理 */
      let data = [];
      const sum = valueList.reduce((per, cur) => per + cur, 0);
      const gap = (2 * sum) / 100;
      const gapData = {
        name: "空格",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };
      // 颜色系列
      const colorList = [
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(68, 160, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(140, 196, 255, 1)", // 100% 处的颜色
            },
          ],
        },
        {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(36, 66, 101, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(36, 66, 101, 1)", // 100% 处的颜色
            },
          ],
        },
      ];
      // 循环添加数据
      for (let i = 0; i < typeList.length; i++) {
        data.push({
          name: typeList[i],
          value: valueList[i],
          itemStyle: {
            borderRadius: 1,
            borderColor: "rgba(36, 66, 101, 1 )",
            borderWidth: 4,
            borderRadius: "6%",
            color: colorList[i],
          },
          labelLine: {
            show: false,
            length: 18,
            length2: 90,
            lineStyle: {
              color: "rgba(66, 151, 255, 0.5)",
            },
          },
        });
        data.push(gapData);
      }

      let option = {
        backgroundColor: "transparent",
        title: {
          text: val,
          top: "45%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
            fontWeight: 400,
          },
        },
        series: [
          {
            type: "pie",
            radius: ["36%", "55%"],
            center: ["50%", "50%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
      };
      this.myChart1444.setOption(option);
    },
    getList() {
      axios.post("/transgeology/basic/workarea/listNoPage", {
        workingFaceCode: this.areaCode, //换三维对应的区域编码
        // areaName:''
      }).then((res) => {
        // this.echartsFn2(res.data[0].extDepth); //开采深度
        // this.echartsFn22(res.data[0].dailyProduction); //日产量
        // this.echartsFn222(res.data[0].avgDayProgress); //推进速度
        this.extDepth = res.data[0].extDepth; //开采深度
        this.dailyProduction = res.data[0].dailyProduction; //日产量
        this.avgDayProgress = res.data[0].avgDayProgress; //推进速度
      });
    },
  },
  mounted() {
    this.getList();
    // this.myChart14 = echarts.init(document.getElementById("chart14"));
    // this.myChart144 = echarts.init(document.getElementById("chart144"));
    // this.myChart1444 = echarts.init(document.getElementById("chart1444"));
    // this.echartsFn2();
    // this.echartsFn22();
    // this.echartsFn222();

    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart14.resize();
      this.myChart144.resize();
      this.myChart1444.resize();
    });
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    // this.myChart14.clear(); //销毁
    // this.myChart144.clear(); //销毁
    // this.myChart1444.clear(); //销毁
  },
};
</script>
<style scoped lang="scss">
.yongshuiliang2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .one {
    margin-top: 60px;
    width: 100%;
    height: 100%;
    text-align: center;
    #chart2,
    #chart22,
    #chart222 {
      width: 98%;
      // height: 240px;
      height: 120px;
    }
    .txt {
      // color: #8495a9;
      color: #fff;
      margin: 10px 0;
      position: relative;
      .txtSon {
        position: absolute;
        left: 48%;
        top: -50%;
        transform: translate(-50%);
      }
    }
    .txtSon2 {
      width: 80px;
      margin-left: 52%;
      text-align: left;
      transform: translate(-50%);
      background: linear-gradient(
        90deg,
        rgba(14, 69, 140, 0) 0%,
        rgba(14, 69, 140, 0.45) 100%
      );
    }
  }
}
</style>
